<template>
  <div>
    <el-form class="pad-t-15 form-diy">
      <el-form-item label="选择音频" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex video-btn mar-l-12">
          <el-upload class="avatar-uploader"
          action="/api/common/uploadFiles"
          accept="image/mp3"
          list-type="picture-card-s"
          :before-upload="beforeUpload" name="files"
          v-loading="fileLoading"
          :data="token" :show-file-list="false" :on-success="handleUploadSuccess">
            <span v-if="details.audioDTO.title" class="font-14 font-blue">{{details.audioDTO.title}}</span>
            <i v-else class="on-btn">上传音频</i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="播放样式" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="playMode" label="0">音乐播放模式</el-radio>
        </div>
      </el-form-item>
      <el-form-item label="标题文字" label-width="80px" class="none-mar-b pad-b-10">
        <div class="mar-l-12 mar-r-12">
          <el-input placeholder="请输入标题文字" v-model="details.audioDTO.title"/>
        </div>
      </el-form-item>
      <el-form-item label="副标题" label-width="80px" class="none-mar-b pad-b-10">
        <div class="mar-l-12 mar-r-12">
          <el-input placeholder="请输入副标题" v-model="details.audioDTO.subtitle"/>
        </div>
      </el-form-item>
      <div class="border-bottom-dashed mar-t-5 mar-b-7 mar-l-12 mar-r-12"></div>
      <el-form-item label="循环播放" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="details.audioDTO.loopPlayback" label="0">关闭</el-radio>
          <el-radio v-model="details.audioDTO.loopPlayback" label="1">开启</el-radio>
        </div>
      </el-form-item>
      <el-form-item label="自动播放" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="details.audioDTO.autoPlayback" label="0">关闭</el-radio>
          <el-radio v-model="details.audioDTO.autoPlayback" label="1">开启</el-radio>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        title: '',
        details: {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {
            audioId: '',
            detailsId: '',
            title: '',
            name: '',
            subtitle: '',
            audioUrl: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          componentVideoDTO: {}
        },
        playMode: '0',
        fileLoading: false
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.details.audioDTO.loopPlayback = this.details1.audioDTO.loopPlayback.toString()
      this.details.audioDTO.autoPlayback = this.details1.audioDTO.autoPlayback.toString()
      this.details.upperLowerMargins = Number(this.details1.upperLowerMargins)
      this.details.sideMargin = Number(this.details1.sideMargin)
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsAudio' + this.eventId, function(details) {
        that.details = details
        that.details.audioDTO.loopPlayback = details.audioDTO.loopPlayback.toString()
        that.details.audioDTO.autoPlayback = details.audioDTO.autoPlayback.toString()
        that.details.upperLowerMargins = Number(details.upperLowerMargins)
        that.details.sideMargin = Number(details.sideMargin)
      })
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file) {
        // const isWMA = file.type === 'audio/wma'
        // const isWAV = file.type === 'audio/wav'
        const isMP3 = file.type === 'audio/mp3'
        if (!isMP3) {
          this.$message.error('上传音频必须是MP3 格式!')
          this.fileLoading = false
          return
        }
        this.fileLoading = true
        return (isMP3)
      },
      handleUploadSuccess(res, file) {
        if (this.fileLoading) {
          if (res.code === 101) {
            this.fileLoading = false
            this.details.audioDTO.audioUrl = res.data[0]
            this.title = file.name
            if (!this.details.audioDTO.title) {
              this.details.audioDTO.title = file.name.substr(0, 11)
            }
            this.$bus.$emit('audioFormData' + this.eventId, this.details)
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
            return false
          }
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            audioUrl: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          componentVideoDTO: {}
        }
      }
    }
  }
</script>
